<template>
	<view class="container">
		<view class="content">
			<!-- 原有的弹窗组件保持不变 -->
			<view>
				<u-popup :show="show" mode="bottom" :round="10">
					<view style="margin-top: 10px" @click="confirmPayWay('1')">
						<u-button style="border: 0" text="配送到家"></u-button>
					</view>
					<view style="margin-top: 10px" @click="confirmPayWay('2')">
						<u-button style="border: 0" text="到店自取"></u-button>
					</view>
					<view style="margin-top: 10px">
						<u-button style="border: 0" text="取消" @click="TurnOff"></u-button>
					</view>
				</u-popup>
			</view>
			<view>
				<u-popup :show="show1" mode="bottom" :round="10">
					<view
						style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 10px">
						<text style="font-size: 12px; color: gray">请选择地址</text>
					</view>
					<view class="content-address-list">
						<view class="content-address-list-itme" v-for="(item, index) in addressList" :key="item.id">
							<view class="content-address-item-up" @click="changeAddress(item)">
								<text style="font-weight: bold; font-size: 22px;">{{item.recipient}}</text>
								<text style="margin-left: 7%; font-weight: bold; font-size: 22px;">{{item.phone}}</text>
							</view>
							<view class="content-address-item-down" @click="changeAddress(item)">
								<text style="font-size: 15px">{{item.area}}
									{{item.detailedAddress}}</text>
							</view>
							<view v-if="index !== addressList.length - 1"
								style="height: 1%;background-color: gainsboro;margin-top: 3%;">
							</view>
						</view>
					</view>
					<view style="margin-top: 10px">
						<u-button style="border: 0" text="取消" @click="TurnOffShow1"></u-button>
					</view>
				</u-popup>
			</view>

			<view class="content-announcement">
				<text style="font-size: 12px; margin-left: 4%; color: #ec9029">提交订单前请勿切换页面</text>
			</view>

			<view v-if="orderData.type == '1'" class="content-address" @click="openShow1">
				<view class="content-address-item">
					<view class="content-address-item-up">
						<text
							style="font-weight: bold; font-size: 22px; margin-top: 4%">{{orderData.addressInfo.recipient}}</text>
						<text
							style="margin-left: 7%; font-weight: bold; font-size: 22px; margin-top: 4%">{{orderData.addressInfo.phone}}</text>
					</view>
					<view class="content-address-item-down">
						<text
							style="font-size: 15px;overflow: hidden;text-overflow: ellipsis;">{{orderData.addressInfo.area}}
							{{orderData.addressInfo.detailedAddress}}</text>
					</view>
				</view>
				<view class="content-address-icon">
					<u-icon name="arrow-right" bold></u-icon>
				</view>
			</view>

			<view class="content-payWay" style="margin-top: 3%;">
				<view style="width: 50%; height: 100%; display: flex; align-items: center">
					<text style="margin-left: 10%; font-size: 14px">支付方式</text>
				</view>
				<view style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end">
					<view
						style="display: flex; width: 80%; justify-content: flex-end; align-items: center; height: 100%">
						<u-icon name="https://www.taotaohomecraft.press/prod-api/profile/wx-pay.png" bold
							size="23"></u-icon>
						<text style="font-weight: bold; font-size: 15px; margin-right: 25%;margin-left: 3%;">微信支付</text>
					</view>
				</view>
			</view>

			<!-- 单个商品展示 -->
			<view class="content-book" v-if="orderData.goodsList && orderData.goodsList.length === 1">
				<view class="content-book-item" v-for="(goods, index) in orderData.goodsList" :key="goods.id">
					<view class="content-book-photo">
						<image v-if="goods.photo != null" style="width: 100%; height: 100%" :src="goods.photo"></image>
						<view v-if="goods.photo == null"
							style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: lightgrey; font-size: 14px">
							暂无图片
						</view>
					</view>
					<view class="content-book-text">
						<view style="width: 400rpx; display: flex; align-items: center; overflow: hidden;">
							<text
								style="font-size: 17px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">{{goods.name}}</text>
						</view>
						<text
							style="font-size: 15px; overflow-x: hidden; max-width: 250px; margin-top: 2%;color: #999999;">{{ goods.classifyName }}</text>
						<text
							style="font-size: 18px; margin-top: 10%;color: red;font-weight: bold;">¥{{ goods.price }}</text>
					</view>
					<view style="height: 20%;width: 4%;display: flex;flex-direction: column;margin-top: 21%;">
						<text style="color: #999999">x{{goods.buyNum}}</text>
					</view>
				</view>
			</view>

			<!-- 多个商品展示 -->
			<view class="content-book-multiple" v-if="orderData.goodsList && orderData.goodsList.length > 1"
				@click="goGoodsList">
				<view class="content-book-multiple-header">
					<text style="font-size: 16px; font-weight: bold;margin-left: 5%;">商品列表</text>
					<view class="content-book-multiple-count">
						<text style="font-size: 14px; color: #999;">共{{totalGoodsCount}}件</text>
						<u-icon name="arrow-right" size="14" color="#999"></u-icon>
					</view>
				</view>
				<view class="content-book-multiple-images" style="margin-left: 5%;">
					<view class="goods-image-item" v-for="(goods, index) in orderData.goodsList.slice(0, 4)"
						:key="goods.id">
						<view class="goods-image-wrapper">
							<image v-if="goods.photo" :src="goods.photo" mode="aspectFill" class="goods-image"></image>
							<view v-else class="goods-image-placeholder">
								<text class="placeholder-text">暂无图片</text>
							</view>
						</view>
					</view>
					<view class="goods-more-count" v-if="orderData.goodsList.length > 4">
						<text class="more-text">+{{orderData.goodsList.length - 4}}</text>
					</view>
				</view>
			</view>

			<view class="content-payWay" v-if="orderData.goodsList && orderData.goodsList.length === 1">
				<view style="width: 50%; height: 100%; display: flex; align-items: center">
					<text style="margin-left: 10%; font-size: 14px">数量</text>
				</view>
				<view style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end">
					<u-number-box v-model="orderData.buyNum" @change="changeBuyNum" color="#000000" bgColor="#ffffff"
						iconStyle="color: #000"></u-number-box>
				</view>
			</view>

			<view class="content-payWay" @click="handleChangePayWay()">
				<view style="width: 50%; height: 100%; display: flex; align-items: center">
					<text style="margin-left: 10%; font-size: 14px">配送方式</text>
				</view>
				<view style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end">
					<view v-if="orderData.type == 1"
						style="display: flex; width: 80%; justify-content: flex-end; align-items: center; height: 100%">
						<u-icon name="car" bold size="25"></u-icon>
						<text style="font-weight: bold; font-size: 15px; margin-right: 5%">配送到家</text>
					</view>
					<view v-if="orderData.type == 2"
						style="display: flex; width: 80%; justify-content: flex-end; align-items: center; height: 100%">
						<u-icon name="home" bold size="25"></u-icon>
						<text style="font-weight: bold; font-size: 15px; margin-right: 5%">到店自取</text>
					</view>

					<view style="margin-right: 10%">
						<u-icon name="arrow-right" bold size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="content-payWay" v-if="orderData.goodsList && orderData.goodsList.length > 1">
				<view style="width: 50%; height: 100%; display: flex; align-items: center">
					<text style="margin-left: 10%; font-size: 14px">商品金额</text>
				</view>
				<view style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end">
					<text style="font-size: 15px;font-weight: bold;margin-right: 10%">¥{{totoalAmount}}</text>
				</view>
			</view>
			<view class="content-payWay" v-if="orderData.goodsList && orderData.goodsList.length > 1">
				<view style="width: 50%; height: 100%; display: flex; align-items: center">
					<text style="margin-left: 10%; font-size: 14px">运费</text>
				</view>
				<view style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end">
					<text style="font-size: 15px;font-weight: bold;color: red;margin-right: 5%;">
						+ ¥{{freight}}.00</text>
				</view>
			</view>

			<view class="footer-button">
				<view style="width: 65%;display: flex;align-items: center;">
					<text style="font-weight: bold;">实付: </text>
					<text style="color: red;font-size: 50rpx;font-weight: bold;"> ¥</text>
					<text style="color: red;font-size: 50rpx;font-weight: bold;">{{totoalAmount}}</text>
					<text style="font-weight: bold;color: red;font-size: 40rpx;margin-left: 5%;">+¥{{freight}} </text>
					<u-icon name="info-circle" @click="handleFreightDetail"></u-icon>
				</view>
				<view style="width: 35%;">
					<u-button :loading="isLoading" type="primary" shape="circle" color="#FF463C" text="提交下单"
						@click="handleCreateOrder()"></u-button>
				</view>
			</view>
		</view>

		<!-- 原有的弹窗组件保持不变 -->
		<view>
			<u-modal content="暂无地址,是否要去添加地址？" :show="show2" showCancelButton closeOnClickOverlay
				@confirm="confirmAddAddress" @cancel="cancelShow2()" @close="cancelShow2()"></u-modal>
		</view>
		<view>
			<u-modal content="30元以上含配送、30元以下5公里以内一单3元，5公里-10公里5元吧。" :show="show3" closeOnClickOverlay confirmColor="red"
				@confirm="cancelShow3" @cancel="cancelShow3()" @close="cancelShow3()"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		createGoodsOrder
	} from '@/api/order';
	import {
		listInfo
	} from '@/api/address.js'
	export default {
		data() {
			return {
				freight: 5,
				totoalAmount: 0,
				isLoading: false,
				show3: false,
				show2: false,
				show: false,
				show1: false,
				orderData: {},
				addressList: []
			};
		},
		computed: {
			totalGoodsCount() {
				if (!this.orderData.goodsList) return 0;
				return this.orderData.goodsList.reduce((total, goods) => total + (goods.buyNum || 1), 0);
			}
		},
		onLoad(options) {
			console.log('原始参数', options);
			if (options.data) {
				try {
					const data = JSON.parse(decodeURIComponent(options.data));
					this.orderData = data;
					console.log(this.orderData);
				} catch (e) {
					console.error('解析失败', e);
				}
			}
			if (this.orderData.type === '1') {
				this.addressListInfo()
			}
			this.calculateTotalAmount()
		},
		methods: {
			calculateTotalAmount() {
				let totoalAmount = 0;
				if (this.orderData.goodsList) {
					this.orderData.goodsList.forEach(item => {
						let amount = item.buyNum * item.price
						totoalAmount = totoalAmount + amount
					})
				}
				this.totoalAmount = totoalAmount;
			},
			// 其他方法保持不变...
			handleChangePayWay() {
				this.show = true;
			},
			TurnOff() {
				this.show = false;
			},
			confirmPayWay(type) {
				this.show = false;
				this.orderData.type = type;
			},
			async handleCreateOrder() {
				this.isLoading = true
				this.orderData.totalAmount = this.totoalAmount + this.freight
				const res = await createGoodsOrder(this.orderData);
				if (res.code === 1000) {
					uni.showToast({
						title: res.msg
					});
				} else if (res.code === 200) {
					console.log("预下单成功", res)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.prepayId,
						signType: 'RSA',
						paySign: res.data.paySign,
						success: function(res) {
							console.log(res)
							uni.showToast({
								title: '支付成功',
								duration: 1000
							});
							uni.reLaunch({
								url: '/order/goodsOrderList/index'
							});
						},
						fail: function(err) {
							console.log(err)

							uni.showToast({
								title: '支付失败',
								icon: 'none',
								duration: 2500
							});
							console.log('fail:' + JSON.stringify(err));
							uni.reLaunch({
								url: '/order/goodsOrderList/index'
							});
						}
					});
				}
				this.isLoading = false
			},
			openShow1() {
				this.show1 = true
				this.getAddressList()
			},
			openShow2() {
				this.show2 = true
			},
			cancelShow2() {
				this.show2 = false
			},

			confirmAddAddress() {
				uni.reLaunch({
					url: '/myself/address/index'
				});
			},
			TurnOffShow1() {
				this.show1 = false
				this.addressList = []
			},
			async getAddressList() {
				const res = await listInfo();
				if (res.code == 200) {
					if (res.rows.length < 1) {
						this.show2 = true
					} else {
						this.addressList = res.rows
					}
				}

			},
			async addressListInfo() {
				const res = await listInfo();
				if (res.code == 200) {
					if (res.rows.length < 1) {
						this.show2 = true
					} else {
						this.orderData.addressInfo = res.rows[0]
					}
				}

			},
			changeAddress(row) {
				this.show1 = false
				this.orderData.addressInfo = row
			},
			changeBuyNum(e) {
				let totalAmount = 0
				this.orderData.goodsList.forEach(item => {
					item.buyNum = e.value
					totalAmount = item.price * e.value
				})
				this.totoalAmount = totalAmount

			},
			handleFreightDetail() {
				this.show3 = true
			},
			cancelShow3() {
				this.show3 = false
			},
			goGoodsList() {
				// 跳转到商品清单页面，传递商品数据
				uni.navigateTo({
					url: '/goods/commodity-list/index?data=' + encodeURIComponent(JSON.stringify(this
						.orderData
						.goodsList))
				});
			},
		}
	};
</script>

<style lang="scss">
	.container {
		position: relative;
		height: 100vh;
		width: 100%;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content {
		width: 93%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.content-announcement {
		width: 100%;
		height: 4%;
		background-color: #fff5dc;
		margin-top: 3%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.content-address {
		margin-top: 3%;
		background-color: #ffffff;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		height: 20%;
		border-radius: 15px;
	}

	.content-address-list {
		margin-top: 2%;
		width: 100%;
		height: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content-address-list-itme {
		width: 90%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-address-item {
		width: 80%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.content-address-item-up {
		width: 100%;
		height: 50%;
		display: flex;
	}

	.content-address-item-down {
		width: 100%;
		height: 50%;
	}

	.content-address-icon {
		width: 15%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.content-payWay {
		width: 100%;
		height: 7%;
		background-color: #ffffff;
		border-radius: 15px;
		display: flex;
		justify-content: space-between;
	}

	.content-book {
		width: 100%;
		background-color: #ffffff;
		margin-top: 3%;
		border-radius: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.content-book-item {
		width: 90%;
		height: 11.5vh;
		margin-top: 3%;
		margin-bottom: 6%;
		display: flex;
		justify-content: space-between;
	}

	.content-book-photo {
		width: 26%;
		height: 100%;
	}

	.content-book-text {
		width: 65%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* 多商品展示样式 */
	.content-book-multiple {
		width: 100%;
		background-color: #ffffff;
		margin-top: 3%;
		border-radius: 15px;
		padding: 20rpx;
	}

	.content-book-multiple-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.content-book-multiple-count {
		display: flex;
		align-items: center;
	}

	.content-book-multiple-images {
		display: flex;
		align-items: center;
	}

	.goods-image-item {
		margin-right: 15rpx;
	}

	.goods-image-wrapper {
		width: 120rpx;
		height: 140rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.goods-image-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #e0e0e0;
	}

	.placeholder-text {
		font-size: 20rpx;
		color: #999;
	}

	.goods-more-count {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.more-text {
		font-size: 24rpx;
		color: #999;
		font-weight: bold;
	}

	.footer-button {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 35rpx;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	.u-button {
		border: none !important;
	}
</style>